<template>
	<view class="page">
		<!-- 微信 项目（订单）展示 -->
		<!-- 搜索区域 -->
		<view class="search">
			<!-- 项目（订单）展示 -->
			<view class="dd" @click="toOrders">
				<uni-data-select class="text" v-model="order.name" :placeholder="order.name" disabled></uni-data-select>
			</view>
			<view class="ss">
				<uni-easyinput v-model="search.name" placeholder="请输入站点名称" @change="change1" clearable></uni-easyinput>
			</view>
			<view class="ss">
				<uni-data-select v-model="search.type" placeholder="请选择设备类型" :localdata="types"
					@change="change2"></uni-data-select>
			</view>
		</view>

		<!-- 维保到期时间展示 -->
		<view class="row">
			<u-row justify="space-between" gutter="20" class="tag">
				<u-col span="4">
					<u-tag :text="status" size="large" :type="status_style" plain plainFill></u-tag>
					<!-- <u--text :text="status"></u--text> -->
				</u-col>
				<u-col span="8">
					<u-tag :text="duetime" size="large" :type="duetime_style" plain plainFill></u-tag>
				</u-col>
			</u-row>
		</view>

		<!-- 在离线 -->
		<view class="row">
			<u-row justify="space-between" gutter="20" class="tag">
				<u-col span="4">
					<u-tag :text="total" size="large" type="primary" @click="toSearch(0)" :plain="checked_0"></u-tag>
				</u-col>
				<u-col span="4">
					<u-tag :text="online" size="large" type="success" @click="toSearch(1)" :plain="checked_1"></u-tag>
				</u-col>
				<u-col span="4">
					<u-tag :text="offline" size="large" type="error" @click="toSearch(2)" :plain="checked_2"></u-tag>
				</u-col>
			</u-row>
		</view>
		<!-- 表格 -->
		<view class="table">
			<zb-table :show-header="true" :columns="column" :stripe="true" :fit="false" @rowClick="rowClick"
				:cell-style="cellStyle" :border="true" :data="data"></zb-table>
		</view>
		<tabbar :current="0"></tabbar>
	</view>
</template>

<script>
	import {
		getTreeJsonByCode
	} from '@/api/common.js';
	import {
		devices
	} from '@/api/common.js';
	export default {
		data() {
			return {
				duetime_style: 'primary',
				status_style: 'success',
				duetime: '维保到期时间：',
				status: '状态：',
				search: {
					name: '',
					type: '',
					online: 0
				}, //查询的参数
				types: [{
						value: 0,
						text: "站牌"
					},
					{
						value: 1,
						text: "导乘屏"
					}
				],
				order: {
					name: '请先选订单'
				},
				checked_0: false,
				total: '总数：0',
				online: '在线：0',
				offline: '离线：0',
				column: [{
						name: 'sid',
						label: 'ID',
						fixed: true,
						width: 70,
						sorter: true,
						type: 'wrap',
						emptyString: '--'
					}, {
						name: 'sname',
						label: '站点',
						fixed: true,
						width: 104,
						type: 'wrap',
						emptyString: '--'
					},
					{
						name: 'dir',
						label: '位置',
						sorter: false,
						fixed: true,
						width: 55,
						align: 'left',
					},
					{
						name: 'onlineState',
						label: '状态',
						width: 49,
					},
					{
						name: 'stime',
						label: '时间',
						width: 80,
						sorter: true,
						type: 'wrap',
					}
				],
				data: [],
			}
		},
		onLaunch() {
			uni.hideTabBar({})
		},
		onShow() {
			uni.hideTabBar({})
			let that = this
			uni.$on('order', function(data) {
				console.log('监听到事件来自 testdata ，携带参数为：' + JSON.stringify(data));
				if (that.order.id != data.id) {
					console.log('订单修改....')
					that.order = data
					that.toSearch()
				}
			})
		},
		onLoad() {
			uni.getStorage({
				key: 'order',
				success: (e) => {
					this.order = e.data
					if (this.order.id != '') {
						this.device_types();
						this.toSearch(0);
					} else {
						// this.order = {
						// 	name: '点此选择订单'
						// }
						uni.showToast({
							title: '请先选择订单',
							icon: 'none'
						});
					}
				},
				fail() {
					// this.order = {
					// 	name: '点此选择订单'
					// }
					uni.showToast({
						title: '请先选订单',
						icon: 'none'
					});
				}
			})
		},
		methods: {
			cellStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (row.onlineState == '离线') {
					return {
						color: 'red',
					}
				}
			},
			change1(e) {
				console.log("站名：" + e + "--" + this.search.name)
				this.search.name = e
				this.toSearch(this.search.online);
			},
			change2(e) {
				console.log("類型：" + e + "--" + this.search.type)
				this.search.type = e
				this.toSearch(this.search.online);
			},
			//查詢設備列表
			toSearch(online) {
				console.log('准备查询：' + this.search.name + "--" + this.search.type)
				var that = this;
				if (that.search.online != online) {
					that.search.online = online
					if (online == 0) {
						that.checked_0 = false
						that.checked_1 = true
						that.checked_2 = true
					}
					if (online == 1) {
						that.checked_0 = true
						that.checked_1 = false
						that.checked_2 = true
					}
					if (online == 2) {
						that.checked_0 = true
						that.checked_1 = true
						that.checked_2 = false
					}
				}
				devices({
					pid: that.order.id,
					sname: that.search.name,
					terminalType: that.search.type,
					type: that.search.online,
				}).then(res => {
					var online_c = 0;
					var offline_c = 0;
					var total_c = 0;
					if (res.length > 0) {
						that.data = res;
						online_c = res[res.length - 1].onlineCount1
						offline_c = res[res.length - 1].offlineCount1
						total_c = online_c + offline_c
						that.duetime = '维保到期时间：' + res[res.length - 1].duetime
						that.status = res[res.length - 1].status
						//比较两个时间/日期的大小
						let obj1 = new Date(that.traversalTime(new Date().getTime())) //当前时间
						let obj2 = new Date(res[res.length - 1].duetime)
						// console.log('obj1:'+obj1)
						// console.log('obj2:'+obj2)
						if (obj1.getTime() > obj2.getTime()) {
							that.duetime_style = 'error'
						}
						if (that.status == '出保') {
							that.status_style = 'error'
						}
					} else {
						that.data = []
					}
					that.total = '总数：' + total_c
					that.online = '在线：' + online_c
					that.offline = '离线：' + offline_c
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			traversalTime(timestamp) {
				//timestamp(时间戳)是整数，否则要parseInt转换
				let time = new Date(timestamp);
				let y = time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let h = time.getHours();
				let mm = time.getMinutes();
				let s = time.getSeconds();
				return y + '-' + this.addTimes(m) + '-' + this.addTimes(d) + ' ' + this.addTimes(h) + ':' + this.addTimes(
					mm) + ':' + this.addTimes(s);

				/***********判断当前时间是上午还是下午************/
				if (h >= 0 && h < 12) {
					this.hoursTip = "上午"
				} else if (h >= 12 && h < 18) {
					this.hoursTip = "下午"
				} else {
					this.hoursTip = "晚上"
				}
			},
			addTimes(m) {
				return m < 10 ? '0' + m : m
			},
			toOrders() {
				console.log('准备跳转项目列表页面')
				uni.navigateTo({
					url: '/pages/order_select/order_select'
				})
			},
			//获取设备类型
			device_types() {
				getTreeJsonByCode({
					code: "DeviceType"
				}).then(res => {
					console.log(res);
					if (res.length > 0) {
						this.types = []
						res.forEach(item => {
							//forEach循环
							console.log(item);
							this.types.push({
								value: item.id,
								text: item.value
							})
						});
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			rowClick(row, index) {
				console.log('選中：' + JSON.stringify(row) + "--" + index)
				uni.navigateTo({
					url: '/pages/device/device?id=' + row.id + '&online=' + row.onlineState
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.search {
		@include flex(space-between, flex-start);
		margin-top: 16rpx;
		height: 80rpx;

		.dd {
			width: 24vw;
			// height: 100%;
			// @include flex(center, center);

			// .text {
			// 	width: 100%;
			// 	text-align: left;
			// 	vertical-align: center;
			// }
		}

		.ss {
			width: 36vw;
		}
	}

	.row {
		margin-top: 20rpx;
	}

	.table {
		margin-top: 20rpx;
	}
</style>